<template>
  <main class="xh-main">
    <section class="relative">
      <img class="full-width" src="http://121.40.123.166/anzren/home.jpg" alt="">
    </section>
    <section class="section-1 relative">
      <p class="header">MAIN ENTRANCE <span>主要入口</span></p>
      <p class="tip"><span class="bolid"></span><span class="name">全方位一站式服务</span><span class="bolid"></span></p>
      <img class="xh-e" src="/static/e.png" alt="">
      <img class="xh-b" src="/static/b.png" alt="">
      <img class="xh-f" src="/static/f.png" alt="">
      <div class="min-pc-width relative">
        <img class="xh-d" src="/static/d.png" alt="">
        <img class="xh-c" src="/static/c.png" alt="">
        <div class="xh-a">
          <div class="item" @click="clickToInstaller">
            <img class="xh-a-img" src="/static/a.png" alt="">
            <span>点击进入安装人数字平台</span>
          </div>
        </div>
        <div class="xh-a xh">
          <div class="item" @click="toXH">
            <img class="xh-a-img" src="/static/xh.png" alt="">
            <span>点击进入上海市安装行业协会</span>
          </div>
        </div>
      </div>
    </section>
    <!-- <section class="section-2 over-hidden relative mb80">
      <p class="header mb20"> MAIN VIDEOS <span> 协会视频</span></p>
      <div class=" min-pc-width flex-space-between">
        <a-carousel autoplay>
          <video v-for="(item, index) in videoList" :key="index" :src="item.realPath"></video>
         </a-carousel>
      </div>
    </section> -->
    <section class="section-2 over-hidden relative">
      <p class="header">ASSOCIATION <span>协会网站</span></p>
      <img class="xh-e e2" src="/static/e.png" alt="">
      <div class="flex-center min-pc-width flex-space-between">
        <div class="item flex-column">
          <span class="zone" @click="toXH">关于协会</span>
          <img class = "item-img mt10" src="/static/sg.png" alt="">
        </div>
        <div class="item flex-column">
          <img class = "item-img" src="/static/dj.png" alt="">
          <span class="zone mt10" @click="toAffairs">党建联建</span>
        </div>
        <div class="item flex-column">
          <span class="zone" @click="toDatabase">科委会</span>
          <img class = "item-img mt10" src="/static/wj.png" alt="">
        </div>
        <div class="item flex-column">
          <img class = "item-img" src="/static/ws.png" alt="">
          <span class="zone mt10"  @click="toInnovation">创优评先</span>
        </div>
      </div>
    </section>
    <section class="section-3 relative">
      <p class="header">DIGITAL SERVICE <span>数字服务平台</span></p>
      <div class=" min-pc-width flex-space-between">
        <div class="item" @click="toClickPath('/installer/cloud/notice')">
          <img src="/static/r4.png" alt="">
          <span class="text">云课堂</span>
        </div>
        <div class="item" @click="toClickPath('/installer/bim')">
          <img src="/static/r2.png" alt="">
          <span class="text">BⅠM</span>
        </div>
        <div class="item" @click="toClickPath('/installer/evaluation/notice')">
          <img src="/static/r5.png" alt="">
          <span class="text">企业能力评价</span>
        </div>
      </div>
      <div class=" min-pc-width flex-space-between mt30">
        <div class="item lg" @click="toClickPath('/installer/cost/rules')">
          <img src="/static/r1.png" alt="">
          <span class="text">造价信息服务</span>
        </div>
        <div class="item lg">
          <img src="/static/r3.png" alt="">
          <span class="text">竣工资料</span>
        </div>
      </div>
      <div class="min-pc-width mt30 flex-space-between">
        <div class="item lg-width">
          <img src="/static/g.png" alt="">
          <span class="text">绿色促进中心</span>
        </div>
      </div>
      <!-- <img class="bg" src="/static/bg02.png" alt=""> -->
    </section>
    <section class="section-4 relatice">
      <div class="home-lute min-pc-center-width">
        <div class="lute-right">
          <vue-scroll>
            <div class="head">
              <span class="title">最新动态</span>
              <!-- <span class="blue-btn">查看更多</span> -->
            </div>
            <div class="item-mod" v-for="(item,index) in news" :key="index" @click="toDetail(item)">
              <div class="left">
                <div class="text">
                  <span class="circel"></span>
                  <span class="name">{{item.title}}</span>
                </div>
                <p class="time">{{item.submit_time}}</p>
              </div>
              <img class="right" :src="item.showPath" alt="img">
            </div>
            <a-pagination class="xh-pager blue-pagination" :pageSize="pageSize" @change="changePage" v-model="current" :total="total" show-less-items />
          </vue-scroll>
        </div>
      </div>
    </section>
    <main-url></main-url>
    <!-- <main-foot></main-foot> -->
  </main>
</template>
<script>
import { mapGetters } from 'vuex'
// import mainFooter from 'components/common/footer'
import mainUrl from 'components/common/url'
export default {
  name: 'standapply',
  data () {
    return {
      news: [],
      current: 1,
      videoList: [],
      total: 0,
      pageSize: 6
    }
  },
  components: {
    // "main-foot": mainFooter,
    mainUrl
  },
  computed: {
    ...mapGetters({
    })
  },
  created () {
    this.getNewTitles()
    // this.getBimList()
    this.getVideoList()
  },
  methods: {
    clickToInstaller () {
      this.$router.push({ path: '/installer/cost/rules' })
    },
    toXH () {
      this.$router.push({ path: '/association/product' })
    },
    toAffairs () {
      this.$router.push({ path: '/party/affairs' })
    },
    toInnovation () {
      this.$router.push({ path: '/innovation/technological' })
    },
    toDatabase () {
      this.$router.push({ path: '/expert/database' })
    },
    changePage (page, size) {
      this.current = page
      this.getNewTitles()
    },
    getNewTitles () {
      this.$http.getNewTitles({}, this.current, this.pageSize).then(res => {
        this.news = res.data.list
        this.total = res.data.total
      })
    },
    getVideoList () {
      this.$http.getVideoList({}).then(res => {
        this.videoList = res.data.list
      })
    },
    toDetail (item) {
      this.$router.push({ path: `/installer/${item.id}` })
    },
    toClickPath (path) {
      this.$router.push({ path: path })
    },
    getBimList () {
      this.$http.getBimList().then(res => {
        // this.news = res.data
      })
    }
  }
}
</script>
<style lang="scss">
.ant-carousel{
  width: 100%;
  .slick-slide {
    text-align: center;
    // height: 160px;
    // line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
    &:hover{
      opacity: 0.5;
    }
    &:before{
      display: none;
    }
  }
}

.ant-carousel{
  .slick-slide {
    h3 {
      color: #fff;
    }
  }
}
</style>
